<template>
  <div class="wraper">
    <div class="operate">
      <button @click="scale(1)">scale+</button>
      <span>-----</span>
      <button @click="scale(0)">scale-</button>
    </div>
    <div
      ref="container"
      class="container"
      :style="{ transform: `scale(${number})` }"
    >
      <vue2-org-tree :data="data" :renderContent="renderContent" />
    </div>
  </div>
</template>
<script>
import "vue2-org-tree/dist/style.css"
export default {

  data () {
    return {
      number: 0.5,
      data: {
        id: 0,
        label: "XXX科技有限公司",
        children: [
          {
            id: 2,
            label: "产品研发部",
            children: [
              {
                id: 5,
                label: "研发-前端"
              },
              {
                id: 6,
                label: "研发-后端"
              },
              {
                id: 9,
                label: "UI设计"
              },
              {
                id: 10,
                label: "产品经理"
              }
            ]
          },
          {
            id: 3,
            label: "销售部",
            children: [
              {
                id: 7,
                label: "销售一部"
              },
              {
                id: 8,
                label: "销售二部"
              }
            ]
          },
          {
            id: 4,
            label: "财务部"
          },
          {
            id: 9,
            label: "HR人事"
          },
          {
            id: 4,
            label: "财务部"
          },
          {
            id: 9,
            label: "HR人事"
          },
          {
            id: 4,
            label: "财务部"
          },
          {
            id: 9,
            label: "HR人事"
          }
        ]
      },
      horizontal: false,
      collapsable: true,
      expandAll: false,
      labelClassName: "bg-white"
    }
  },
  methods: {
    scale (type) {
      if (type > 0) {
        this.number += 0.1
        return
      }
      this.number -= 0.1

    },
    renderContent (h, data) {
      const cls = ["diy-wrapper view-item-box"]
      let log = require('@/image/zuzhijiagou.png')
      console.log(data)
      return (
        <div class={cls} >
          <div>
            <img src={log} style="width: 22px; height: 22px;margin-right:5px" />
            <span style="font-size:16px; font-weight:bold">{data.label}</span>
          </div>
          <p>{'id:' + data.id}</p>
          <p>CEO</p>
          <div><span style="margin-right: 10px">在职人数</span><span>{data.id}</span></div>
        </div >
      )
    }
  }
};
</script>
<style>
.wraper {
  width: 800px;
  height: 500px;
  position: relative;
  background: pink;
  border: 3px dashed red;
}
.operate {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9999;
}
.container {
  transform-origin: left 50%;
}
.org-tree-node-label {
  /* min-width: 150px; */
}
.view-item-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-height: 100%;
  padding: 10px;
  border-radius: 2px;
  box-shadow: 0 1px 10px rgba(31, 35, 41, 0.08);
  cursor: pointer;
  position: relative;
  font-size: 14px;
  min-width: 150px;
}
.vertical .org-chart-node-label .org-chart-node-label-inner {
  padding: 0;
}
.org-tree-container {
  background-color: transparent;
}
</style>
